<template>
    <div class="teamplate-cashmonitoring">
        <div class="container-fluid">
            <div class="row" style="overflow: hidden;">
                <div class="list-h item-hd" style="padding: 5px;">
                    <div class="btn-group">
                        <button class="btn" @click="onTab1(0)">在岗收款员监测</button>
                        <button class="btn" @click="onTab1(1)">各款台银条监测</button>
                        <button class="btn" @click="onTab1(2)">前台库存监测</button>
                    </div>
                </div>
                <div class="item-bd">
                    <div class="item" v-show="item==0">
                        <div class="clearfix table-list mb10 pb10">
                            <div class="col-lg-6" style="border-right:1px solid #dee6f1;">
                                <div class="title tc">在岗收款员收款总况</div>
                                <div class="table-wrap" style="height:300px;">
                                <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">收款台内码</th>
                                                <th style="text-align:left">收款员</th>
                                                <th style="text-align:right">应收金额</th>
                                                <th style="text-align:right">实收金额</th>
                                                <th style="text-align:right">优惠金额</th>
                                                <th style="text-align:right">抹零</th>
                                                <th style="text-align:right">上缴金额</th>
                                            </tr>
                                            <tr v-for="(item,index) in tableList.list1">
                                                <td>{{item.sktid}}</td>
                                                <td>{{item.shky}}</td>
                                                <td style="text-align:right">{{parseFloat(item.ysje).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.sshje).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.yhje).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.moling).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.shangjje).toFixed(2)}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="title tc">收款员收款金额况图</div>
                                <div class="chart-box" >
                                    <div id="chart1" class="son-chart" style="height:300px;" v-bind:style="{ width: chartWidth + 'px' }"></div>
                                </div>
                            </div>
                        </div>
                        <div class="table-wrap p10 mb15">
                            <table class="table table-striped" width="100%">
                                <tbody>
                                    <tr>
                                        <th  style="text-align:left">药品编号</th>
                                        <th  style="text-align:left">药品名称</th>
                                        <th  style="text-align:left">药品规格</th>
                                        <th  style="text-align:left">产地</th>
                                        <th style="text-align:right">数量</th>
                                        <th style="text-align:right">应收金额</th>
                                        <th style="text-align:right">实收金额</th>
                                        <th style="text-align:right">金额</th>
                                        <th style="text-align:right">成本金额</th>
                                        <th style="text-align:right">税额</th>
                                        <th style="text-align:right">毛利</th>
                                    </tr>
                                    <tr  v-for="(item,index) in tableList.list2">
                                        <td  style="text-align:left">{{item.spbh}}</td>
                                        <td  style="text-align:left">{{item.spmch}}</td>
                                        <td  style="text-align:left">{{item.shpgg}}</td>
                                        <td  style="text-align:left">{{item.shpchd}}</td>
                                        <td  style="text-align:right">{{item.shl}}</td>
                                        <td  style="text-align:right">{{item.ysje}}</td>
                                        <td  style="text-align:right">{{item.sshje}}</td>
                                        <td  style="text-align:right">{{item.je}}</td>
                                        <td  style="text-align:right">{{item.chbje}}</td>
                                        <td  style="text-align:right">{{item.she}}</td>
                                        <td  style="text-align:right">{{item.ml}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="item" v-show="item==1">
                        <div class="clearfix table-list mb10 pb10">
                            <div class="col-lg-6" style="border-right:1px solid #dee6f1;">
                                <div class="title tc">各款台银箱金额状况</div>
                                <div class="table-wrap" style="height:300px;">
                                <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">收款台内码</th>
                                                <th style="text-align:right">收款金额</th>
                                                <th style="text-align:right">找零</th>
                                                <th style="text-align:right">抹零</th>
                                                <th style="text-align:right">上缴金额</th>
                                            </tr>
                                            <tr v-for="(item,index) in tableList.list3">
                                                <td>{{item.sktid}}</td>
                                                <td style="text-align:right">{{parseFloat(item.shkje).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.zhaol).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.moling).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.shangjje).toFixed(2)}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="title tc">各款台银箱金额状况图</div>
                                <div class="chart-box">
                                    <div id="chart2" class="son-chart" style="height:300px;" v-bind:style="{ width: chartWidth + 'px' }"></div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix table-list mb10 pb10">
                            <div class="col-lg-6" style="border-right:1px solid #dee6f1;">
                                <div class="title tc">收款金额机构</div>
                                <div class="table-wrap" style="height:300px;">
                                    <table class="table table-striped" width="100%">
                                        <tbody>
                                            <tr>
                                                <th style="text-align:left">账簿名称</th>
                                                <th style="text-align:right">收款金额</th>
                                                <th style="text-align:right">找零</th>
                                                <th style="text-align:right">抹零</th>
                                                <th style="text-align:right">上缴金额</th>
                                            </tr>
                                            <tr v-for="(item,index) in tableList.list4">
                                                <td>{{item.jsfsmch}}</td>
                                                <td style="text-align:right">{{parseFloat(item.shkje).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.zhaol).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.moling).toFixed(2)}}</td>
                                                <td style="text-align:right">{{parseFloat(item.shangjje).toFixed(2)}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="title tc">各款台银箱金额状况图</div>
                                <div class="chart-box" >
                                    <div id="chart3" class="son-chart" style="height:300px;" v-bind:style="{ width: chartWidth + 'px' }"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item" v-show="item==2">
                        <div class="bd-hd clearfix" style="background:#fff;padding:5px 10px 0">
                            <button class="btn" @click="onTab2(0)">所有品种</button>
                            <button class="btn" @click="onTab2(1)">需要配货的品种</button>
                            <div class="btn-group pull-right">
                                <button  type="botton"  class="btn btn-default"  @click="onExport"> 导出表格</button>
                            </div>
                        </div>
                        <div class="bd-bd">
                            <div class="table-wrap p10" v-show="itemChild==0">
                                <table class="table table-striped" width="100%">
                                    <tbody>
                                        <tr>
                                            <th style="text-align:left">货位名称</th>
                                            <th style="text-align:left">药品编号</th>
                                            <th style="text-align:left">药品名称</th>
                                            <th style="text-align:left">药品规格</th>
                                            <th style="text-align:left">产地</th>
                                            <th style="text-align:right">当前库存</th>
                                            <th style="text-align:right">已经销售数量</th>
                                            <th style="text-align:right">需要补货数量</th>
                                            <th style="text-align:right">库存上限</th>
                                            <th style="text-align:right">库存下限</th>
                                        </tr>
                                        <tr v-for="(item,index) in tableList.list5">
                                            <td>{{item.huowname}}</td>
                                            <td>{{item.spid}}</td>
                                            <td>{{item.spmch}}</td>
                                            <td>{{item.shpgg}}</td>
                                            <td>{{item.shpchd}}</td>
                                            <td>{{item.currentKuCun}}</td>
                                            <td style="text-align:right">{{parseFloat(item.alreadyXSShL).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.needBuHuoShL).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.kcsx).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.kcxx).toFixed(2)}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-wrap p10" v-show="itemChild==1">
                                <table class="table table-striped" width="100%">
                                    <tbody>
                                        <tr>
                                            <th style="text-align:left">货位名称</th>
                                            <th style="text-align:left">药品编号</th>
                                            <th style="text-align:left">药品名称</th>
                                            <th style="text-align:left">药品规格</th>
                                            <th style="text-align:left">产地</th>
                                            <th style="text-align:right">当前库存</th>
                                            <th style="text-align:right">已经销售数量</th>
                                            <th style="text-align:right">需要补货数量</th>
                                            <th style="text-align:right">库存上限</th>
                                            <th style="text-align:right">库存下限</th>
                                        </tr>
                                        <tr v-for="(item,index) in tableList.list6">
                                            <td>{{item.huowname}}</td>
                                            <td>{{item.spid}}</td>
                                            <td>{{item.spmch}}</td>
                                            <td>{{item.shpgg}}</td>
                                            <td>{{item.shpchd}}</td>
                                            <td>{{item.currentKuCun}}</td>
                                            <td style="text-align:right">{{parseFloat(item.alreadyXSShL).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.needBuHuoShL).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.kcsx).toFixed(2)}}</td>
                                            <td style="text-align:right">{{parseFloat(item.kcxx).toFixed(2)}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sktid: "",
                item: 0,
                itemChild: 0,
                chartWidth: 0,
                tableList: {
                    list1: {},
                    list2: {},
                    list3: {},
                    list4: {},
                    list5: {}
                },
                chart: {
                    bar1: {
                        title: [],
                        data: []
                    },
                    bar2: {
                        title: [],
                        data: []
                    },
                    bar3: {
                        title: [],
                        data: []
                    }
                },
                title: '',
                fdbs: '',
                urls: ''
            };
        },
        watch: {},
        methods: {
            onTab1(num) {
                let me = this;
                me.item = num;
            },
            onTab2(num) {
                let me = this;
                me.itemChild = num;
            },
            onExport(e) {
                let me = this;
                if (me.itemChild == 0) {
                    me.title = '所有品种';
                    me.urls = me.cfg.api + '/frontMonitor/selectQTKCJCAllDY';
                }
                if(me.itemChild == 1){
                    me.title = '需配货商品';
                    me.urls = me.cfg.api + '/frontMonitor/selectQTKCJCNeedPeiHuoDY';
                }
                var downloadToken = +new Date();
                var _self = this;
                var url = me.urls + '?file=' + me.title + '&title=' + me.title + '&fdbs=' + me.fdbs;
                var obj = {
                    time: downloadToken,
                    url: url,
                    _self: _self,
                }
                exportExcelForm(obj);
            },
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            me.fdbs = localStorage.getItem('fdbs');
            let res5 = {
                fdbs: me.fdbs,
                page: "1",
                rows: "15"
            };
            me.service.selectSKYSKHZ(me, data => {
                me.tableList.list1 = data.data;
                data.data.forEach((item, index) => {
                    me.chart.bar1.title.push($.trim(item.sktid));
                    me.chart.bar1.data.push($.trim(item.sshje));
                });
                console.log(me.chart.bar1.data, 7474748);
                let myChart1 = echarts.init(document.getElementById("chart1"));
                let option1 = {
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: 20,
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: me.chart.bar1.title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: "value"
                    }],
                    series: [{
                        name: "收款金额",
                        type: "bar",
                        data: me.chart.bar1.data
                    }]
                };
                myChart1.setOption(option1);
            });
            me.service.selectSPXSHZ(me, data => {
                me.tableList.list2 = data.data;
            });
            me.service.selectGSKTYXJEZK(me, data => {
                me.tableList.list3 = data.data;
                data.data.forEach((item, index) => {
                    me.chart.bar2.title.push($.trim(item.sktid));
                    me.chart.bar2.data.push($.trim(item.shkje));
                });
                let myChart2 = echarts.init(document.getElementById("chart2"));
                let option2 = {
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: 20,
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: me.chart.bar2.title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: "value"
                    }],
                    series: [{
                        name: "收款金额",
                        type: "bar",
                        data: me.chart.bar2.data
                    }]
                };
                myChart2.setOption(option2);
            });
            me.service.selectSKJEJG(me, data => {
                me.tableList.list4 = data.data;
                data.data.forEach((item, index) => {
                    me.chart.bar3.title.push($.trim(item.sktid));
                    me.chart.bar3.data.push($.trim(item.shkje));
                });
                let myChart3 = echarts.init(document.getElementById("chart3"));
                let option3 = {
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: 20,
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: me.chart.bar3.title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: "value"
                    }],
                    series: [{
                        name: "收款金额",
                        type: "bar",
                        data: me.chart.bar3.data
                    }]
                };
                myChart3.setOption(option3);
            });
            me.service.selectQTKCJCAll(me, res5, data => {
                me.tableList.list5 = data.data.lists;
            });
            me.service.selectQTKCJCNeedPeiHuo(me, res5, data => {
                me.tableList.list6 = data.data.lists;
            });

            me.chartWidth = $(".item-bd")
                .find(".col-lg-6")
                .eq(0)
                .width();
        }
    };
</script>